<template>
  <i-form @submit.native.prevent="onSubmit()">
    <i-input v-model="query.keyword" class="query-input" :class="{active: active}" placeholder="请输入关键字">
      <i-select v-model="query.type" slot="prepend" style="width: 80px">
        <i-option value="Course">课程</i-option>
        <i-option value="Post">问答</i-option>
        <i-option value="Note">笔记</i-option>
      </i-select>
      <i-button slot="append" icon="ios-search" html-type="submit"></i-button>
    </i-input>
  </i-form>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      query: {
        keyword: null,
        type: 'Course',
        tagId: null
      }
    }
  },
  methods: {
    onSubmit() {
      if (!this.query.keyword) return
      this.$router.push({
        name: 'search',
        params: {
          type: this.query.type,
          tagId: this.query.tagId
        },
        query: {
          keyword: this.query.keyword
        }
      })
    }
  }
}
</script>
<style lang="less">
.query-input {
  .ivu-input-group-prepend,
  .ivu-input-group-append {
    background: white;
    border: none;
    border-radius: 0;
    > button {
      padding-top: 8px;
      padding-bottom: 4px;
    }
  }
  .ivu-select-item {
    text-align: left !important;
    padding-left: 10px !important;
  }
  .ivu-select {
    width: 55px !important;
    .ivu-select-selected-value {
      text-align: left !important;
      padding-left: 10px !important;
      padding-right: 0 !important;
    }
  }
  .ivu-select-dropdown {
    border-radius: 0;
  }
  .ivu-input {
    border-color: white;
    border-left-color: #f0f0f0;
    border-right-color: #f0f0f0;
    height: 37px;
    &:focus {
      outline: none;
      box-shadow: none;
      border-color: white;
      border-left-color: #f0f0f0;
      border-right-color: #f0f0f0;
    }
    &:hover {
      border-color: white;
      border-left-color: #f0f0f0;
      border-right-color: #f0f0f0;
    }
  }
  &.active {
    .ivu-input-group-prepend,
    .ivu-input {
      border: 1px solid #39f;
    }
    .ivu-input-group-prepend {
      border-right: none;
    }

    .ivu-input-group-append {
      background: #39f;
      > button {
        color: white;
      }
    }
  }
  .ivu-icon-ios-search {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
